import React, {Component} from 'react';
import {View,Text,TouchableOpacity,StyleSheet} from 'react-native';
import SortableList from 'react-native-sortable-list';
import NavigationBar from "../common/NavigationBar";
import Ionicons from "react-native-vector-icons/Ionicons";

const THEME_COLOR = '#678';

class LanguageSortable extends Component {
  constructor(props){
    super(props);
    this.state = {
      languages: [
        {name:'C++',isChecked:true},
        {name:'CSS',isChecked:true},
        {name:'HTML',isChecked:false},
        {name:'Java',isChecked:true},
        // {name:'JavaScript',isChecked:false},
        // {name:'Unknown languages',isChecked:true},
        // {name:'TypeScript',isChecked:false},
        // {name:'ActionScript',isChecked:false},
        // {name:'Zeek',isChecked:true},
        // {name:'C',isChecked:false},
        // {name:'C#',isChecked:false},
        // {name:'AutoHotkey',isChecked:false},
        // {name:'Ballerina',isChecked:true},
        // {name:'Alloy',isChecked:false},
      ],
    }
  }
  render() {
    let {languages} = this.state;
    let navigation = <NavigationBar
      title={'语言排序'}
      style={{backgroundColor:THEME_COLOR}}
      leftButton={this.leftButton()}
      rightButton={this.rightButton()}
    />;
    return (
      <View style={{flex:1}}>
        {navigation}
        <SortableList
          data={languages}
          renderRow={({data,key})=>this.renderItem(data,key)}
          style={{flex:1}}
        />
      </View>
    );
  }

  // 每一个item
  renderItem = (data,key) => {
    // console.log(active,index,disabled,data);
    console.log(key)
    return <View style={styles.ItemBox}>
      <Ionicons name={'list'} size={30} style={{marginRight: 10}} color={'#666'}/>
      <Text>{data.name}</Text>
    </View>
  };

  leftButton = () => {
    let {navigation} = this.props;
    return <TouchableOpacity style={{marginLeft: 10}} onPress={()=>navigation.goBack()}>
      <Ionicons name={'arrow-back'} size={26} color={'#fff'}/>
    </TouchableOpacity>
  };

  rightButton = () => {
    return <Text style={{color:'#fff',fontSize:16, paddingRight: 10}}>保存</Text>
  }
}

const styles = StyleSheet.create({
  ItemBox:{
    backgroundColor:'#fff',
    height: 60,
    padding: 20,
    borderBottomWidth: 1,
    borderColor:'#ddd',
    flexDirection:'row',
    alignItems:'center'
  }
});

export default LanguageSortable;